Jassif Team Institution

HTML Web Storage API

HTML ওয়েব স্টোরেজ API; কুকিজের চেয়ে ভালো।

HTML ওয়েব স্টোরেজ কি?

ওয়েব স্টোরেজ সহ, অ্যাপ্লিকেশনগুলি ব্যবহারকারীর ব্রাউজারে স্থানীয়ভাবে ডেটা সঞ্চয় করতে পারে।

HTML5 এর আগে, অ্যাপ্লিকেশন ডেটা কুকিগুলিতে সংরক্ষণ করতে হত, যা প্রতিটি সার্ভারের অনুরোধে যোগ করা হয়েছিল। ওয়েব স্টোরেজ খুবই নিরাপদ, এবং ওয়েবসাইটের কর্মক্ষমতা প্রভাবিত না করেই প্রচুর পরিমাণে ডেটা স্থানীয়ভাবে সংরক্ষণ করা যেতে পারে।

কুকিজ থেকে ভিন্ন, স্টোরেজ সীমা অনেক বড় (অন্তত 5MB) এবং তথ্য সার্ভারে স্থানান্তর করা হয় না।

ওয়েব স্টোরেজ মূল ভিত্তিক (ডোমেন এবং প্রোটোকল ভিত্তিক)। সমস্ত পৃষ্ঠাগুলি একটি একক উত্স থেকে একই ডেটা সংরক্ষণ এবং অ্যাক্সেস করতে পারে৷

ওয়েব স্টোরেজ API অবজেক্ট

ওয়েব স্টোরেজ ব্রাউজারে ডেটা সঞ্চয় করার জন্য দুটি বস্তু প্রদান করে:

ব্রাউজার সমর্থন

টেবিলের সংখ্যাগুলি প্রথম ব্রাউজার সংস্করণকে উপস্থাপন করে যা সম্পূর্ণরূপে ওয়েব স্টোরেজ সমর্থন করে।

ওয়েব স্টোরেজ API সমর্থন পরীক্ষা করুন

WebStorage ব্যবহার করার আগে, আসুন স্থানীয় স্টোরেজ এবং সেশন স্টোরেজের জন্য ব্রাউজার সমর্থন দ্রুত পরীক্ষা করে দেখি:

<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
  x.innerHTML = "Your browser supports Web storage!";
} else {
  x.innerHTML = "Sorry, no Web storage support!";
}
</script>

স্থানীয় স্টোরেজ অবজেক্ট

লোকাল স্টোরেজ অবজেক্ট মেয়াদ শেষ হওয়ার তারিখ ছাড়াই ডেটা সঞ্চয় করে। ব্রাউজার বন্ধ থাকলেও ডেটা হারিয়ে যায় না এবং পরের দিন, সপ্তাহ বা বছরের জন্য উপলব্ধ থাকে।

<script> const x = document.getElementById("ফলাফল"); if (typeof(Storage) !== "অনির্ধারিত") { // সংরক্ষণ করুন localStorage.setItem("শেষ নাম", "স্মিথ"); localStorage.setItem("bgcolor", "হলুদ"); // পুনরুদ্ধার করুন x.innerHTML = localStorage.getItem("শেষ নাম"); x.style.backgroundColor = localStorage.getItem("bgcolor"); } অন্য { x.innerHTML = "দুঃখিত, ওয়েব স্টোরেজ সমর্থন নেই!"; } </script>

উদাহরণ বর্ণনা:

1. নাম/মান জোড়া তৈরি করতেlocalStorage.setItem()পদ্ধতি ব্যবহার করুন
2. সেট মান পুনরুদ্ধার করতেlocalStorage.getItem()পদ্ধতি ব্যবহার করুন
3. "শেষ নাম" মান পুনরুদ্ধার করুনid="result"উপাদান মধ্যে সন্নিবেশ
4. "bgcolor" এর মান পুনরুদ্ধার করুন।id="result"উপাদানটির পটভূমির রঙে সন্নিবেশ করুন

"শেষ নাম" স্থানীয় স্টোরেজ আইটেমটি সরানোর জন্য সিনট্যাক্স নিম্নরূপ:

localStorage.removeItem("lastname");

লোকাল স্টোরেজ দিয়ে ক্লিক গণনা করা হচ্ছে

নিম্নলিখিত উদাহরণে একজন ব্যবহারকারী কতবার একটি বোতামে ক্লিক করেছে তা গণনা করে। এই কোডে মানটিকে একটি স্ট্রিং নম্বরে রূপান্তরিত করা হয় যাতে কাউন্টারটি বৃদ্ধি করা যায়:

<script>
function clickCounter() {
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    x.innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)!";
  } else {
    x.innerHTML = "Sorry, no Web storage support!";
  }
}
</script>

সেশন স্টোরেজ অবজেক্ট

সেশনস্টোরেজ অবজেক্ট স্থানীয় স্টোরেজ অবজেক্টের সমতুল্য, যা শুধুমাত্র একটি সেশনের জন্য ডেটা সঞ্চয় করে! ব্যবহারকারী নির্দিষ্ট ব্রাউজার ট্যাব বন্ধ করে দিলে ডেটা মুছে ফেলা হয়।

সেশন স্টোরেজ সহ ক্লিক গণনা করা হচ্ছে

নিম্নলিখিত উদাহরণটি বর্তমান সেশনে একজন ব্যবহারকারী কতবার একটি বোতামে ক্লিক করেছে তা গণনা করে:

<script>
function clickCounter() {
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
      sessionStorage.clickcount = 1;
    }
    x.innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session!";
  } else {
    x.innerHTML = "Sorry, no Web storage support!";
  }
}
</script>

ওয়েব স্টোরেজ পদ্ধতি

অনুশীলন করুন